<template>
  <div class='container'>
    <div class="app-container">
      <el-card v-loading = "isLoading">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
          <el-form-item label="关键字">
            <el-input v-model="pageform.keyword" placeholder="根据文章标题搜索" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="pageform.state" placeholder="请选择" @keyup.enter="onSubmit">
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="medium" @click="clear">清除</el-button>
            <el-button type="primary" @click="onSubmit" size="medium">搜索</el-button>
          </el-form-item>
          <el-button
            type="success" icon="el-icon-edit" class="right-btn" size="medium"
            @click="addOpen"
          >新增技巧</el-button>
        </el-form>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          show-icon
          style="margin-bottom:20px"
          :closable="false"
        />
        <el-table
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号" type="index" :index="indexMethod" />
          <el-table-column align="center" label="文章标题">
            <template #default="{row}">
              <span>{{row.title}}</span>
              <i
                v-if="row.videoURL" class="el-icon-film" style="color:blue;font-size: 20px"
                @click="showVideo(row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读数">
            <template #default="{row}">
              <span>{{row.visits}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center" label="录入人"
          >
            <template #default="{row}">
              <span>{{row.creatorID | formmatcreatorID}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template #default="{row}">
              <span>{{row.createTime | formatrightTime('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template #default="{row}">
              <span v-if="row.state==1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template #default="{row}">
              <el-button type="text" @click="artPreview(row)">预览</el-button>
              <el-button type="text">
                <span v-if="row.state == 1" @click="row.state = 0">启用</span>
                <span v-else @click="row.state = 1">禁用</span>
              </el-button>
              <el-button
                type="text"
                @click="artEdit(row)"
                :disabled="row.state === 0"
              >修改</el-button>
              <el-button
                type="text"
                :disabled="row.state === 0"
                @click="delArtical(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageform.page"
              :total="total"
              :page-size="pageform.pagesize"
              :page-sizes="[5,10,20,50]"
              layout="prev, pager, next, sizes, jumper"
            />
          </div>
        </div>
      </el-card>
      <articles-add ref="artical" :isShow.sync="isShow" @refresh="getArticleList" />
      <articles-preview :isVisible.sync="isVisible" :previewData="previewData" />
      <video-tools :isVideoShow.sync="isVideoShow" ref="video" />
    </div>

  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/articles.js'
import articlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
import VideoTools from '@/components/VideoTools/index'

export default {
  components: { articlesAdd, ArticlesPreview, VideoTools },
  name: 'Articles',
  data () {
    return {
      dataList: [],
      pageform: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      total: 20,
      listLoading: false,
      isShow: false,
      isVisible: false,
      isVideoShow: false,
      previewData: {},
      isenabled: true,
      isLoading: false
    }
  },
  methods: {
    onSubmit () {
      this.pageform.page = 1
      this.getArticleList()
    },
    async getArticleList () {
      this.isLoading = true
      const { data: { items, counts } } = await list(this.pageform)
      this.total = counts
      this.dataList = items
      this.isLoading = false
      console.log(this.dataList)
    },
    handleSizeChange (val) {
      this.pageform.pagesize = val
      this.pageform.page = 1
      this.getArticleList()
    },
    handleCurrentChange (val) {
      this.pageform.page = val
      this.getArticleList()
    },
    indexMethod (index) {
      return index + 1 + this.pageform.pagesize * (this.pageform.page - 1)
    },
    addOpen () {
      this.isShow = true
    },
    clear () {
      this.pageform.keyword = ''
      this.pageform.state = null
    },
    async delArtical (data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示').then(async () => {
        await remove(data)
        this.$message.success('删除文章成功')
        if (this.dataList.length === 1 && this.pageform.page > 1) {
          this.pageform.page--
        }
        this.getArticleList()
      }).catch(() => {
        console.log('取消删除')
      })
    },
    async artPreview (data) {
      this.isVisible = true
      const res = await detail(data)
      this.previewData = res.data
    },
    async artEdit (data) {
      this.isShow = true
      const res = await detail(data)
      this.$refs.artical.form = res.data
    },
    showVideo (row) {
      this.isVideoShow = true
      this.$refs.video.openVideo(row)
    }
  },
  created () {
    this.getArticleList()
  }
}
</script>

<style scoped lang='scss'>
.app-container{
  .right-btn {
     float: right;
  }
  .pagination{
    margin: 20px 0;
    float: right;
  }
  .film{
    color:blue;
    font-size: 20px;
  }
}

</style>
